<template>
	<view class="pages">
		<com-head textTit="充值记录" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template >
			<!-- <view class="timerWrap" @click="showTime = true">
				<view class="left">
					<text class="title">时间</text>
					<text>{{time}}</text>
				</view>
				<u-icon name="arrow-down" color="#000000"></u-icon>
			</view>
			<view class="priceWrap">
				当前余额：<text>{{userInfo.balance}}元</text>
			</view> -->
			
			<view class="lists">
			   <image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/vip.png" mode="aspectFill"></image>
			   <view class="content">
				   <view class="vipPrice">{{reType == 0 ? '门店' : '平台'}}余额</view>
			   	  <view class="head">
			   	  	  <text class="price">
						  <text class="pls">
							  <text>
								  ¥</text>{{reType == 0 ? userInfo.balance : userInfo.sys_balance}}
							  </text>
						  </text>
			   	  </view>
				  <view class="bottom">
					<view class="storeList" v-if="reType == 0">
						通用门店: 全部 
					</view>
					<view class="storeList" v-if="reType == 1">
						全平台通用
					</view>
				  </view>
			   </view>
			</view>
			
			<view class="tab">
				<view class="tab-active" @click="tabFun(0)">
					充值记录
					<image v-if="tabIndex === 0" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" />
				</view>
				<view class="tab-active" @click="tabFun(1)">
					绑定记录
					<image v-if="tabIndex === 1" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" />
				</view>
			  <view class="icon" @click="showTime = true"><u-icon name="calendar" color="#4D5562" size="45"></u-icon></view>
			</view>
			
			
			<view class="listWrap" v-if="list.length">
				<view class="list" v-for="(ele,index) in list" :key="index">
					<!-- 充值记录 -->
					<view class="top" v-if="tabIndex === 0">
						<text class="name" v-if="ele.store == null">总后台</text>
						<text class="name" v-else>{{ele.store.title}}</text>
						<view class="price">+{{ele.vip.price}}  <text v-if="ele.give_price != '0.00'">(送 {{ele.vip.give_price}})</text></view>
					</view>
					<!-- 绑定记录 -->
					<view class="top" v-if="tabIndex === 1">
						<text class="name">{{ele.vip.title}}</text>
						<view class="price">+{{ele.vip.price}}</view>
					</view>
					<view class="bottom">
						<text class="time">{{ele.create_time}}</text>
						
						<view class="plB" v-if="tabIndex === 0 && ele.status == 2">
							<button plain="true" open-type='share' class="sharebtn" @click="shareFun(ele)">
								<view class="buy">分享</view>
							</button>
							<view class="buy" @click.stop="binding(ele)">绑定</view>
						</view>

						<!-- <text class="status" 
						@click="goUrl(ele)"
						v-if="ele.is_invoice == 0" >{{ele.is_invoice == 0 ? '未开票' :'已开票'}}</text>
						<text v-else class="status active">{{ele.is_invoice | is_invoice}}</text> -->
					</view>
				</view>
			</view>
			<!-- <view class="noDate" v-else>
				<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
				<view>暂无更多充值记录~</view>
			</view> -->
		</template>
		
		<u-loadmore margin-top="300" margin-bottom="50" :status="status" />
		<u-picker :endYear="year" :endMonths="month" :endDay="day"
		mode="time" confirm-color="#007664" v-model="showTime" :value="time" :default-time="defaultTime" @confirm="confirmTime"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year:"",
				month:'',
				day:'',
				showTime:false,
				list:[],
				time:"",
				defaultTime:'',
				scrollTop: 0,
				page: 1,
				status:'loading',
				rowData: {},
				tabIndex: 0,
				reType: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onShareAppMessage: function (res) {
			console.log(3434, res)
		  // if (res.from !== 'button') {
			 // 来自页面内转发按钮
			  return {
				 title: this.rowData.vip.title,
				 imageUrl: this.rowData.vip.img,
				 path: `/pages/mine/vipDetails?id=${this.rowData.vip.id}&out_trade_no=${this.rowData.out_trade_no}&type=${this.reType}`,
			   }
		   // }
		},
		async onPullDownRefresh() {
			this.list=[]
			var myDate = new Date();
			// this.time = this.utlis.getNowDate(myDate,true)
			this.$u.toast('刷新成功!')
			await this.getUserInfo()
			await this.getUserPrice()
			uni.stopPullDownRefresh()
		},
		onLoad({type}) {
			if (type) this.reType = type
			
			this.getUserInfo()
			// 获取当前日期
			var myDate = new Date();
			this.year = myDate.getFullYear()
			this.month = myDate.getMonth() + 1
			this.day = myDate.getDate()
			// this.time = this.utlis.getNowDate(myDate,true)
			console.log(myDate,this.time,"myDatemyDate")
			this.list=[]
			this.getUserPrice()
		},
		filters: {
		    is_invoice(val) {
		      switch (val) {
		        case 1:
		          val = "待开票";
		          break;
		        case 2:
		          val = "已开票";
		          break;
		        case 3:
		          val = "已作废";
		          break;
		        case 4:
		          val = "超时未开票";
		          break;
		      }
		      return val;
		    },
		  },
		onReady() {
			var date = new Date;
			this.defaultTime =this.utlis.getNowDate(date)
		},
		// // 分页加载
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getUserPrice();
			}
		},
		methods: {
			tabFun(type) {
				console.log(45, type)
				this.tabIndex = type
				this.page = 1
				this.list = []
				this.getUserPrice()
			},
			// 绑定
			async binding(row) {
				let {data,code} = await this.$u.api.vipBind({out_trade_no:row.out_trade_no});
				if(code){
					row.status = 3
					this.toast('绑定成功')
					this.getUserInfo()
					
					this.page = 1
					this.list = []
					this.getUserPrice();
				}
			},
			shareFun(row) {
				this.rowData = row
				console.log(55, this.rowData)
			},
			// 获取用户信息
			async getUserInfo() {
				let {
					data,
					code
				} = await this.$u.api.userInfo({
					store_id: this.store_id
				});
				if (code) {
					this.$u.vuex('userInfo', data)
				}
			},
			confirmTime(e){
				this.time = e.year +'-'+ e.month +'-'+ e.day 
				console.log(232, e, this.time)
				this.getUserPrice()
			},
			goUrl(ele){
				if(ele.store != null){
					this.utlis.goUrl(`/pages/mine/applyInvoice?ids=${ele.id}&price=${ele.price}&type=2&company_id=${ele.store.company_id}`)
				}else{
					this.utlis.goUrl(`/pages/mine/applyInvoice?ids=${ele.id}&price=${ele.price}&type=2`)
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {data,code} = await this.$u.api.userInfo({store_id:this.store_id});
				if(code){
					this.$u.vuex('userInfo', data)
				}
			},
			async getUserPrice(){
				let Api
				let obj = {}
				if (this.tabIndex === 0) { // 充值记录
					Api = this.$u.api.getUserPrice
					obj = this.reType == 0 ? {date:this.time, page: this.page} : {date:this.time, page: this.page, is_sys: 1}
				} else { // 绑定记录（区分门店、平台）
					Api = this.reType == 0 ? this.$u.api.getBindList : this.$u.api.getSysBindList
					obj = {date:this.time, page: this.page}
				}
				let {code,data} = await Api(obj);
				if(code){
					// this.list = data.lists
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.list = [...this.list, ...data.data];
					this.list.forEach((ele)=>{
						if(ele.images){
							ele.images = ele.images.split(',')
						}
					})
					this.total = data.total;
					if (this.total <= this.list.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
 .pages{
	 padding: 50rpx 30rpx;
	 .noDate{
	 	width: 360rpx;
	 	position: absolute;
	 	left: 50%;
	 	top: 45%;
	 	transform: translate(-50%,-50%);
	 	color: #666666;
	 	font-size: 26rpx;
	 	text-align: center;
	 	image{
	 		width: 360rpx;
	 		height: 310rpx;
	 		display: block;
	 		margin-bottom: 78rpx;
	 	}
	 }
	 .tab{
	 	padding: 10rpx 0;
	 	text-align: center;
	 	font-size: 32rpx;
	 	font-weight: 400;
	 	color: #999999;
	 	position: relative;
		display: flex;
		.icon{
			position: absolute;
			right: 0;
			top: 8rpx;
		}
	 }
	 .tab-active{
		width: 130rpx;
	 	color: #242833;
		margin-right: 50rpx;
		position: relative;
	 	// font-weight: bold;
		.bg{
			width: 130rpx;
			height: 8rpx;
			position: absolute;
			bottom: -10rpx;
			left: 0;
		}
	 }
	 .lists{
	 	width: 686rpx;
	 	height: 350rpx;
	 	position: relative;
	 	margin-bottom: 30rpx;
		margin-top: 20rpx;
	 	image{
	 		width: 686rpx;
	 		height: 350rpx;
	 		position: absolute;
	 		top: 0;
	 		z-index: 1;
	 	}
	 	.content{
	 		width: 686rpx;
	 		height: 376rpx;
	 		position: absolute;
	 		top: 0;
	 		z-index: 2;
	 		padding: 30rpx 36rpx 36rpx 40rpx;
	 		.vipPrice{
	 			font-size: 32rpx;
	 			color: #AA5200;
	 			margin-bottom: 10rpx;
	 		}
	 		.discount{
	 			width: 100%;
	 			text-align: right;
	 			color: #FFFFFF;
	 			font-size: 36rpx;
	 		}
	 		.head{
	 			display: flex;
	 			justify-content: space-between;
	 			margin-bottom: 20px;
	 			// align-items: center;
	 			.price{
	 				font-size: 64rpx;
	 				font-weight: 500;
	 				color: #AA5200;
	 				line-height: 65rpx;
	 				text{
	 					margin-left: 24rpx;
	 					color: #AA5200;
	 					font-size: 64rpx;
	 					// margin-left: 14rpx;
	 				}
	 				.pls{
	 					margin-left: 0rpx !important;
	 					font-weight: bold;
						  background: -webkit-linear-gradient(left, #CD7122, #FDAD35);
						  -webkit-background-clip: text;
						  -webkit-text-fill-color: transparent;
						  background-clip: text;
						  text-fill-color: transparent;
	 					text{
	 						margin-left: 0rpx !important;
	 						margin-right: 10rpx;
							font-size: 50rpx;
	 					}
	 				}
	 			}
	 			.right{
	 				display: flex;
	 				align-items: center;
	 				color: #007664;
	 				font-size: 26rpx;
	 				position: absolute;
	 				top: 30rpx;
	 				right: 36rpx;
	 				text{
	 					margin-left: 13rpx;
	 				}
	 			}
	 			.t1{
	 				color: #A08761;
	 			}
	 			.t2{
	 				color: #90929C;
	 			}
	 			.t3{
	 				color: #C2A060;
	 			}
	 		}
	 		.bottom{
	 			display: flex;
	 			justify-content: space-between;
	 			align-items: center;
	 			font-size: 28rpx;
	 			color: #AA5200;
	 			margin-top: 120rpx;
	 			.storeList{
	 				width: 450rpx;
	 			}
	 		}
	 	}
	 }
	 
	 
	 .listWrap{
		 margin-top: 25rpx;
		 .list{
			 width: 686rpx;
			 height: 168rpx;
			 background: #FFFFFF;
			 border-radius: 20rpx;
			 padding: 36rpx 32rpx;
			 box-sizing: border-box;
			 margin-bottom: 32rpx;
			 .top,.bottom{
				 display: flex;
				 align-items: center;
				 justify-content: space-between;
			 }
			 .top{
				 margin-bottom: 30rpx;
				 .name{
					 color: #333333;
					 font-size: 26rpx;
				 }
				 .price{
					 color: #007664;
					 font-weight: bold;
					 font-size: 28rpx;
					 text{
						 font-weight: 400;
						 font-size: 26rpx;
						 color: #999;
						 margin-left: 10rpx;
					 }
				 }
			 }
			 .bottom{
				 .plB{
					display: flex;
				}
				 .buy{
				 	text-align: center;
				 	padding: 0rpx 20rpx !important;
				 	height: 50rpx;
				 	line-height: 50rpx;
				 	background: linear-gradient(135deg, #50DCC2 0%, #007664);
				 	border-radius: 100rpx;
				 	color: #FFFFFF;
				 	font-size: 28rpx;
					margin-left: 20rpx;
				 }
				 .time{
					 color: #999999;
					 font-size: 24rpx;
				 }
				 .status{
					 color: #3EA5FF;
					 font-size: 26rpx;
				 }
				 .active{
					 color: #FFA53E;
				 }
			 }
		 }
	 }
	 .priceWrap{
		 text-align: right;
		 margin: 32rpx 0 49rpx 0;
		 color: #333333;
		 font-size: 26rpx;
		 text{
			 color: #891F00;
		 }
	 }
	 .timerWrap{
		 width: 686rpx;
		 height: 91rpx;
		 background: #FFFFFF;
		 border-radius: 8rpx;
		 padding: 32rpx;
		 box-sizing: border-box;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 .left{
			 display: flex;
			 color: #333333;
			 font-size: 24rpx;
			 align-items:center;
			 .title{
				 font-size: 26rpx;
				 margin-right: 60rpx;
			 }
		 }
	 }
 }

.sharebtn{
	// height: 50rpx;
	// line-height: 50rpx;
	// background: transparent;
	border: 1rpx solid transparent;
	// padding: 0 !important;
	// margin: 0;
	// border-radius: 100rpx;
}

</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
